<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="1200px"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    :append-to-body="true"
    :before-close="handleClose"
  >
    <el-row :gutter="24">
      <el-col :span="11">
        <el-card header="基础信息">
          <el-form ref="controlEdit" :model="control" :rules="rules" label-width="130px">
            <el-form-item label="选择控件" prop="ControlId">
              <el-select v-model="control.ControlId" :disabled="id != null" placeholder="选择搜索组件" @change="chioseControl">
                <el-option v-for="item in controls" :key="item.Id" :value="item.Id" :label="item.Name" />
              </el-select>
            </el-form-item>
            <el-form-item label="标题" prop="Label">
              <el-input v-model="control.Label" placeholder="标题" :maxlength="50" clearable />
            </el-form-item>
            <el-form-item v-if="location !== 0" label="输入提示" prop="Placeholder">
              <el-input v-model="control.Placeholder" placeholder="输入提示" :maxlength="50" clearable />
            </el-form-item>
            <el-form-item label="筛选关系" prop="FilterMode">
              <enumItem
                v-model="control.FilterMode"
                :dic-key="EnumDic.QueryFilterMode"
                :limit="filterMode"
                sys-head="form"
                placeholder="筛选关系"
              />
            </el-form-item>
            <el-form-item v-if="location === 1" label="在更多筛选中显示" prop="IsMoreFilter">
              <el-switch v-model="control.IsMoreFilter" />
            </el-form-item>
            <el-form-item label="查询列" prop="ColumnId">
              <formColChiose v-model="control.ColumnId" :is-mulite="isMulite" :form-id="[formId]" :func-type="funcType" :show-mode="showMode" :filter-data-type="dataType" :clearable="true" :ver="ver" />
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      <el-col :span="13">
        <controlSet ref="controlSet" :configs="configs" :control-set="controlSet" :form-id="formId" />
      </el-col>
    </el-row>

    <div slot="footer" style="text-align: center">
      <el-button type="primary" @click="save">保存</el-button>
      <el-button @click="reset">重置</el-button>
    </div>
  </el-dialog>
</template>

<script>
import formColChiose from '@/customForm/components/form/formColChiose.vue'
import { EnumDic } from '@/customForm/config/formConfig'
import { Gets } from '@/customForm/api/queryControl'
import { Add, Set, Get } from '@/customForm/api/phyQuery'
import controlSet from './controlSet.vue'
export default {
  components: {
    formColChiose,
    controlSet
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    formId: {
      type: String,
      default: null
    },
    id: {
      type: String,
      default: null
    },
    location: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      EnumDic,
      title: '左侧搜索栏配置配置',
      rules: {
        Label: [{
          required: true,
          message: '标题不能为空！',
          trigger: 'blur'
        }],
        ControlId: [{
          required: true,
          message: '搜索控件不能为空！',
          trigger: 'blur'
        }],
        FilterMode: [{
          required: true,
          message: '筛选条件不能为空！',
          trigger: 'blur'
        }],
        ColumnId: [{
          required: true,
          message: '查询列不能为空！',
          trigger: 'blur'
        }]
      },
      configs: null,
      filterMode: null,
      control: {
        Label: null,
        ControlId: null,
        FilterMode: null,
        Placeholder: null,
        ColumnId: null,
        IsMoreFilter: false
      },
      controls: [],
      funcType: [],
      dataType: [],
      showMode: null,
      code: null,
      controlSet: {},
      source: null,
      ver: 0,
      isMulite: false
    }
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.reset()
        }
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    reset() {
      this.title = '左侧搜索栏配置'
      this.loadControl()
      if (this.id != null) {
        this.load()
      } else {
        this.control = {
          Label: null,
          ControlId: null,
          FilterMode: null,
          ColumnId: null,
          Placeholder: null,
          IsMoreFilter: false
        }
        this.chioseControl()
      }
    },
    async load() {
      const res = await Get(this.id)
      this.source = res
      this.control.ControlId = res.ControlId
      this.control.Label = res.Label
      this.control.ColumnId = res.IsMultiple ? res.ColumnId : res.ColumnId[0]
      this.control.Placeholder = res.Placeholder
      this.control.FilterMode = res.FilterMode
      this.control.IsMoreFilter = res.IsMoreFilter
      this.chioseControl()
    },
    chioseControl() {
      const c = this.controls.find(c => c.Id === this.control.ControlId)
      if (c != null) {
        this.dataType = c.DataType
        this.funcType = c.FuncType
        this.isMulite = c.IsMultiple
        this.code = c.Code
        this.configs = c.Config
        this.showMode = c.ShowMode
        this.filterMode = c.FilterMode == null || c.FilterMode.length === 0 ? null : c.FilterMode
        this.controlSet = c.Id === this.source.ControlId ? this.source.ControlSet : null
        this.IsMoreFilter = c.IsMoreFilter
      } else {
        this.dataType = null
        this.funcType = null
        this.isMulite = false
        this.code = null
        this.configs = null
        this.filterMode = null
        this.showMode = null
        this.controlSet = null
        this.IsMoreFilter = false
      }
      this.ver = this.ver + 1
    },
    handleClose() {
      this.$emit('update:visible', false)
    },
    async loadControl() {
      this.controls = await Gets(this.location)
      if (this.control != null && this.configs == null) {
        this.chioseControl()
      }
    },
    async set() {
      const data = Object.assign({}, this.control)
      delete data.ControlId
      data.IsMultiple = this.isMulite
      if (data.ColumnId && !Array.isArray(data.ColumnId)) {
        data.ColumnId = [data.ColumnId]
      }
      data.ControlSet = this.$refs.controlSet.getValue()
      await Set(this.id, data)
      this.$message({
        message: '更新成功!',
        type: 'success'
      })
      this.$emit('update:visible', false)
      this.$emit('save')
    },
    async add() {
      const data = this.format()
      this.id = await Add(data)
      this.$message({
        message: '保存成功!',
        type: 'success'
      })
      this.$emit('update:visible', false)
      this.$emit('save')
    },
    format() {
      const data = Object.assign({}, this.control)
      data.FormId = this.formId
      data.Location = this.location
      data.IsMultiple = this.isMulite
      data.ControlCode = this.code
      data.ControlSet = this.$refs.controlSet.getValue()
      if (data.ColumnId && !Array.isArray(data.ColumnId)) {
        data.ColumnId = [data.ColumnId]
      }
      return data
    },
    save() {
      this.$refs['controlEdit'].validate((valid) => {
        if (valid) {
          if (this.id == null) {
            this.add()
          } else {
            this.set()
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>
